<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>图片上传</title>
    <!--<script type="text/javascript" src="js/jquery-1.8.3.js"></script>-->
    <!--<script type="text/javascript" src="ftnjs/uploadImage.js" ></script>-->
    <!--<script type="text/javascript" src="js/exif.js" ></script>-->
    <style>
        .mark{
            position:absolute;
            height:100px;
            width:100px;
            left:100px;
            top:180px;
            border:1px solid #000;
            cursor:move;
        }
    </style>
</head>
<body>
<!--//显示原图像-->
<canvas id="c1"></canvas>
<div class="mark" id="mark"></div>
<!--//显示剪切后的图像-->
<canvas id="c3"></canvas>
<script src="js/jquery-1.11.3.js"></script>
<script>
    var canvas1 = document.getElementById("c1")
    var oMark = document.getElementById("mark")
    var canvas3= document.getElementById("c3")
    canvas1.height = 300;
    canvas1.width=300;
    canvas3.height=100;
    canvas3.width=100;
    var cxt1 = canvas1.getContext("2d")
    var img = new Image();
    img.src = "http://42.62.66.198:8006/2017/07/04/151349.jpg";
    var srcX = oMark.offsetLeft-canvas1.getBoundingClientRect().left;
    var srcY = oMark.offsetTop-canvas1.getBoundingClientRect().top;
    var sWidth = oMark.offsetWidth;
    var sHeight = oMark.offsetHeight;

    var canvas2 = document.createElement("canvas");
    var cxt2=canvas2.getContext("2d");
    img.onload = function(){
        cxt1.drawImage(img,0,0,canvas1.width,canvas1.height);
        img=null;
        var dataImg = cxt1.getImageData(srcX,srcY,sWidth,sHeight);
        canvas2.width = sWidth;
        canvas2.height = sHeight;
        cxt2.putImageData(dataImg,0,0,0,0,canvas2.width,canvas2.height);
        var img2 = canvas2.toDataURL("image/png");

        var cxt3=canvas3.getContext("2d");
        var img3 = new Image();
        img3.src = img2;
        img3.onload  = function(){
            cxt3.drawImage(img3,0,0,canvas3.width,canvas3.height)
        }

    }
</script>
</body>
</html>  